

<!-- 广告页 -->
<template>
	<view class="content flex-all-center">
		<image :src="pic_img" class="b-g_image" mode="widthFix"></image>
		<view class="adImageBg" mode="widthFix"></view>
			
		<view class="all" @click="resourceClick()">
			<!-- <view class="bottom flex-all-center">
				<image src="/static/images/index/logo-row.png"></image>
			</view> -->
			<view v-if="secondsFlag" class="right flex-all-center" v-on:click.stop="toIndex">{{ second }}s | 跳过</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				icon: {},
				pic_img: '',
				secondsFlag: false,
				second: 5,
				data: {},
				adImageBg: ""
			};
		},
		computed: {
			...mapState(['imgSite'])
		},
		onReady() {
			let that = this;
			that.$api.globalUtil.requestAjax({
				url: '/bannerApi/findBannerByTypeApi',
				method: 'POST',
				data: {
					terminal: '20',
					bannerLocate: '110',
					type: null
				},
				success: function(res) {
					if(res.data.response.length > 0) {
						that.pic_img = that.imgSite + res.data.response[0].bannerAddress;
						that.data = res.data.response[0];
						that.secondsFlag = true;
						setTimeout(that.clock(), 1000);
					}else {
						uni.switchTab({
							url: './index'
						});
					}
				}
			});
		},
		onShow() {
			if(this.second == 0) {
				uni.switchTab({
					url: './index'
				});
			}
		},
		methods: {
			clock() {
				// if(this.second>0)setTimeout(this.clock(),1000);
				var interval = setInterval(() => {
					this.second > 0 ? this.second -= 1 : clearInterval(interval);
					if (this.second == 0) {
						uni.switchTab({
							url: './index'
						});
					}
				}, 1000);
			}, //点击跳转
			resourceClick() {
				uni.setStorage({
					key: 'firstLoad',
					data: true
				})
				this.$api.globalUtil.adJumpToOtherPage(this.data);

			},
			toIndex() {

				uni.switchTab({
					url: './index'
				})
			}
		}
	};
</script>

<style lang="less">
	page {
		width: 100%;
		background-color: white;
		overflow: hidden;
	}

	.content {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: fixed;
	}

	.all {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		overflow: hidden;
		z-index: 11;
	}

	.bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		background-color: white;
		width: 100%;
		height: 170rpx;
		z-index: 12;

		image {
			width: 406rpx;
			height: 80rpx;
		}
	}

	.right {
		position: absolute;
		right: 29rpx;
		top: 98rpx;
		background-color: #000;
		width: 140rpx;
		height: 54rpx;
		z-index: 12;
		border-radius: 27rpx;
		opacity: 0.3;
		color: white;
		font-size: 25rpx;
	}
	
	
	//广告图片
	.adImageBg {
		position: absolute;
		left: 0;
		bottom: 170rpx;
		width: 100%;
		height: 100%;
        background-size:auto 100%;
	}
	.b-g_image{
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}
</style>



